<script lang="ts">
import type { VNode } from 'vue';
import { isFunction } from '@peng_kai/kit/libs/lodash-es';
import { computedAsync } from '@peng_kai/kit/libs/vueuse';
import cs from '~/composables/useCS';
</script>

<script lang="ts" setup>
export interface IList { title: string; content: string | (() => VNode) }
// withDefaults(defineProps<{ list?: IList[] }>(), { list: () => qaqList });
const appStore = useAppStore();
const qaqList = computed(() => {
  return [
    {
      title: `💳 ${$t('3lnEbkSpr0qNkZ3gHHic')}`,
      content: `${$t('jqcmdmcpx7LjXzK6aGpVg')}
      <p class="!mt-2">${$t('kdQjpmJnEe8mTtsH0P5ob')}</p>`,
    },
    {
      title: `🔥️ ${$t('nRbzgNxykrAh0L_04VvTm')}`,
      content: `${$t('itNQvPRw84Cf_0EEZx')}
      <p class="!mt-2">${$t('wXUtGeWxsENu8lb6GTqpq')}</p>
      <p class="!mt-2">${$t('dSp0mVTkeLBc5Oe7nRcxZ')}</p>`,
    },
    {
      title: `🤑 ${$t('na69eMeySpkt1w0wHn7Uy')}`,
      content: `${$t('qd2f8TRdq12Dfqg5opMy')}
      <p class="!mt-2">${$t('p3O5PHvmXvppGwCxPzZfQ')}</p>`,
    },
    {
      title: `💵 ${$t('miA5Fz5M0tMkUg29xg35U')}`,
      content: `${$t('5Sg8Qs2SrzibWtHbZ7hSz')}
    <p class="!mt-2">${$t('5bVjk0vV0iUq1Mr77H6qO')}</p>`,
    },
    {
      title: `💰 ${$t('wLPohFvLFtwR3bB6T8r2')}`,
      content: `${$t('6U0qZkdMUlsclQj4yIv7L')}
      <p class="!mt-2">${$t('0HSjRmn754vi1il9zAZiY')}</p>`,
    },
    {
      title: `🟢 ${$t('cPPdifB71sCfRzfa7MeZa')}`,
      content: `${$t('c2UbmF2FkGvtf61Oxo3Bi')}
      <p class="!mt-2">${$t('cD3fowlOfYumMDuCDh')}</p>
      <p class="!mt-2">${$t('tOn0wcNJdHbAjYXhpA4dx')}</p>
      <p class="!mt-2">${$t('l1979RcxEhyRoIuUcCsOn')}</p>`,
    },
    {
      title: `⏰ ${$t('nD83qudRYCxkIwQYLp')}`,
      content: `${$t('b8UDfSsq5X0PjablgKgYd')}
      <p class="!mt-2">${$t('gojoaCpRSpYzg0qhgdgEq')}</p>
      <p class="!mt-2">${$t('p50IvQouYp1I9DbzBjXmj')}</p>`,
    },
    {
      title: `🎁 ${$t('2MsN0XoMd4VPbetCms1uL')}`,
      content: `${$t('93aOjBz2ZlxBupWzMBc8', { name: appStore.appName })}
      <p class="!mt-2">${$t('msKhDx0OsQaZsuXzjzrrB')}</p>
      <p class="!mt-2">${$t('j1cqmfeT7SpHlog4_8qj')}</p>`,
    },
    {
      title: `❗${$t('xTelXwSyhWTspehe0Uqxd')}`,
      content: `${$t('lSjJ8qobIkYz0sK1Ct2yb')}
      <p class="!mt-2">${$t('zJegUugAkId4v2w91ojRk')}</p>
      <p class="!mt-2">${$t('0ZhrInb3yBxxDnCqZeHos')}</p>`,
    },
    {
      title: `💸 ${$t('7lI0WkFwLzlGx9L22pQl')}`,
      content: `${$t('ylmyNmoiwJPZolVjSwUg')}
      <p class="!mt-2">${$t('7i9RkmBx7cGdCwtCrEMa')}</p>`,
    },
    {
      title: `🕔 ${$t('iBkgPt6Doy83zMcnXkCcC')}`,
      content: `${$t('byOelmgCjscCwFpXsRrkl')}
      <p class="!mt-2">${$t('cGMoDgLeEAjm381Sk4vir')}</p>
      <p class="!mt-2">${$t('wtsTxvBnX1Tlu2zU0BEiM')}</p>`,
    },
    {
      title: `⛔ ${$t('kaoVuz8YusFc35GdoMtd')}`,
      content: `${$t('qHqc0amV87xuxC7TuXqTo')}
      <p class="!mt-2">${$t('mbpcFfdhylGoqcRlT0Uf')}</p>`,
    },

  ];
});

const activeRef = defineModel<string | number>('active');

function RenderContent({ content }: { content: IList['content'] }) {
  if (!content)
    return null;
  if (isFunction(content))
    return content();
  const regex = /<[^>]+>/g;
  return regex.test(content) ? h('div', { innerHTML: content }) : content;
}
</script>

<template>
  <TCard :title="$t('xk6SKdHgiHgx60gZBuyx6')">
    <ACollapse v-model="activeRef" accordion :border="false" class="ant-cover__collapse bg-transparent!" expandIconPosition="end" :bordered="false">
      <ACollapsePanel
        v-for=" (item, idx) of qaqList"
        :key="idx "
        :name="idx"
        class="ant-cover__collapse-panel"
        :titleClass="$bp.ltTabletl ? 'text-3.5' : 'text-5'"
        :border="false"
      >
        <template #header>
          <div>{{ item.title }}</div>
        </template>
        <p class="text-4 text-sys-text-body lt-tabletl:text-3">
          <RenderContent :content="item.content" />
        </p>
      </ACollapsePanel>
    </ACollapse>
  </TCard>
</template>
